<!-- 库存与销量模块 -->
<template>
	<div id="com-container">
		<div class="com-chart" ref="stock_ref">

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				chartInstance: null,
				allData: null, //服务器返回的数据
				currentIndex: 0, //当前显示的一个页数
				timerId: null

			}

		},
		mounted() {
			this.initChart()
			this.getData()
			//屏幕监听事件
			window.addEventListener('resize', this.screenAdapter)
			//在页面加载完成的时候 主动进行屏幕的适配
			this.screenAdapter()

		},
		destroyed() {
			window.removeEventListener('resize', this.screenAdapter)
			clearInterval(this.timerId)
		},
		methods: {
			//初始化echarInstance对象
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.stock_ref, 'chalk') //第二个参数主题的使用
				//对图表初始化配置的控制
				const initOption = {
					title: {
						text: '▎库存与销量分析',
						top: 20,
						left: 20
					}
				}
				//可以多次设置setOption  它是相互整合的过程  不会覆盖之前的设置
				this.chartInstance.setOption(initOption)
				//鼠标事件
				this.chartInstance.on('mouseover', () => {
					clearInterval(this.timerId)
				})
				this.chartInstance.on('mouseout', () => {
					this.startInterval()
				})
			},
			// 获取服务器的数据
			async getData() {
				// http://127.0.0.1:8000/api/stock
				const {
					data: ret
				} = await this.$http.get('stock')
				this.allData = ret
				this.updateChart()
				this.startInterval()

			},
			//更新图表
			updateChart() {
				//每一个元素圆环的中心位置
				const centerArr = [
					['18%', '40%'],
					['50%', '40%'],
					['82%', '40%'],
					['34%', '75%'],
					['66%', '75%']
				]
				//颜色渐变的值
				const colorArr = [
					['#4FF778', '#0BA82C'],
					['#E5DD45', '#E8B11C'],
					['#E8821C', '#E55445'],
					['#5052EE', '#AB6EE5'],
					['#23E5E5', '#2E72BF']
				]
				//处理表数据
				const start = this.currentIndex * 5
				const end = (this.currentIndex + 1) * 5
				//获取前5个元素
				const showData = this.allData.slice(start, end)
				const seriesArr = showData.map((item, index) => {
					return { //每一个 元素类型都设置为饼图
						type: 'pie',
						radius: [110, 100], //两个半径可以得到圆环
						center: centerArr[index],
						hoverAnimation: false, //关闭鼠标移动到饼图的动画效果
						labelLine: {
							show: false //关闭指示线
						},
						label: {
							position: 'center', //设置圆环外面的文字显示在内部
							color: colorArr[index][0]
						},
						data: [{
								name: item.name + '\n' + item.stock,
								value: item.sales,
								itemStyle: { //设置圆环的颜色
									color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
											offset: 0,
											color: colorArr[index][0]
										},
										{
											offset: 1,
											color: colorArr[index][1]
										}
									])
								}
							},
							{
								value: item.stock,
								itemStyle: { //设置圆环的颜色
									color: '#333843'
								}
							}
						]
					}
				})
				const dataOption = { //因为前面都配置过 这里只对数据行配置 
					series: seriesArr

				}
				this.chartInstance.setOption(dataOption)

			},
			screenAdapter() { //屏幕适配  当浏览器发生变化时 图表也随之改变
				const titleFontSize = this.$refs.stock_ref.offsetWidth / 100 * 2.6
				const innerRadius = titleFontSize * 2.5
				const outterRadius = innerRadius * 1.125
				const adapterOption = { //屏幕适配相关的一些配置
					title: {
						textStyle: {
							fontSize: titleFontSize
						}
					},
					series: [{
							type:'pie',
							radius: [outterRadius, innerRadius],
							label: {
								fontSize: titleFontSize*0.8
							}
						},
						{
							type:'pie',
							radius: [outterRadius, innerRadius],
							label: {
								fontSize: titleFontSize*0.8
							}
						},
						{
							type:'pie',
							radius: [outterRadius, innerRadius],
							label: {
								fontSize: titleFontSize*0.8
							}
						},
						{
							type:'pie',
							radius: [outterRadius, innerRadius],
							label: {
								fontSize: titleFontSize*0.8
							}
						},
						{
							type:'pie',
							radius: [outterRadius, innerRadius],
							label: {
								fontSize: titleFontSize*0.8
							}
						}
					]



				}
				this.chartInstance.setOption(adapterOption)

				//手动调用图表对象的resize  才能产生效果
				this.chartInstance.resize()
			},
			startInterval() { //定时器
				if (this.timerId) {
					clearInterval(this.timerId)
				}
				this.timerId = setInterval(() => {
					this.currentIndex++
					if (this.currentIndex > 1) {
						this.currentIndex = 0
					}
					this.updateChart() //在更改完currentIndex之后 我们要进行更新数据
				}, 5000)
			}

		}
	}
</script>

<style scoped="scoped">
</style>
